<template>
  <div class="mesProcess">
    <div>
      <ele-page
        v-loading="loading"
        :formConfig="searchConfig"
        ref="eleTable"
        :operateList="operateList"
        @handleOperateEvent="handleOperateEvent"
        :column="column"
        :getList="getList"
        uniqueId="mesProcessTable"
      >
      </ele-page>
    </div>
    <ele-form-drawer class="dialog-pack" :isLoading="isLoading" v-model="formDataDialog" v-bind="formDescDialog" :request-fn="handleSubmit" :visible.sync="visible" :title="title">
      <!-- 正则规则查-->
      <template v-slot:regularName>
        <el-input v-model="formDataDialog.regularName" readonly :placeholder="$t('mesProcess.selectRegularName')">
          <el-button slot="append" icon="el-icon-search" @click="mesRegularConfigurationDialogVisible = true"></el-button>
        </el-input>
      </template>
    </ele-form-drawer>

    <!-- 分配弹框 -->
    <ele-form-dialog
      width="1000px"
      :isLoading="isLoadingCell"
      v-model="formDataDialogCell"
      v-bind="formDescDialogCell"
      :request-fn="handleSubmitCell"
      :visible.sync="visibleCell"
      :title="$t('mesProcess.selectStation')"
      :dialogAttrs="{ 'close-on-click-modal': false }"
    >
      <template v-slot:modelingCode>
        <el-select v-model="formDataDialogCell.modelingCode" @change="searchLocation" filterable="filterable">
          <el-option v-for="item in options" :key="item.modelingCode" :label="item.modelingName" :value="item.modelingCode"> </el-option>
        </el-select>
        <!-- <el-button
          icon="el-icon-search"
          type="primary"
          @click="searchLocation"
          >{{ $t("common.search") }}</el-button
        > -->
      </template>

      <template v-slot:table>
        <el-table :data="tableData" style="width: 100%;" :row-class-name="tableRowClassName">
          <el-table-column type="index" width="50"> </el-table-column>
          <el-table-column prop="workshopName" :label="$i18n.t('mesProcess.workshopName')"> </el-table-column>
          <el-table-column prop="processName" :label="$i18n.t('mesProcess.processName')"> </el-table-column>
          <el-table-column prop="lineName" :label="$t('mesCoEsopInfo.line')"> </el-table-column>
          <el-table-column prop="workCellName" :label="$i18n.t('mesProcess.station')"> </el-table-column>

          <el-table-column :label="$i18n.t('common.operation')">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">{{ $i18n.t('common.delete') }}</el-button>
            </template></el-table-column
          >
        </el-table>
      </template>
    </ele-form-dialog>

    <!--  此组件放到与抽屉平级，理论上不需要修改 -->
    <ele-dialog-table
      :title="$t('mesProcess.regularQuery')"
      width="800px" :clearSelected = "true"
      :visible.sync="mesRegularConfigurationDialogVisible"
      :formConfig="mesRegularConfigurationSearchDialog"
      :column="mesRegularConfigurationDialogColumn"
      @getSelectData="getSelectMesRegularConfiguration"
      :getList="getRegularList"
      :hasFooter="hasMesRegularConfigurationFooter"
    >
    </ele-dialog-table>
  </div>
</template>

<script>
import { operateList, searchConfig, rowConfig, formDescDialogMinxin, formDescDialogCell, locationDialog } from './config'
import {
  getList,
  rowCreate,
  rowUpdate,
  rowDel,
  rowDetail,
  getProcessTypeIdList,
  getProcessPropertyList,
  getRepairFlowFlag,
  getYesOrNotList,
  getReportModelList,
  getCellListByCode,
  addProcessCell,
  getListByProcess,
  baseFactoryModeling
} from '@/api/process/mesProcess'
import { mesRegularConfigurationDialog } from './mixinRegular'
import url from '@/axios/url'
const { minioUrl } = url()
export default {
  name: 'mesProcess',
  mixins: [formDescDialogMinxin, searchConfig, locationDialog, mesRegularConfigurationDialog, operateList],
  data() {
    return {
      processCodeList: [],
      title: null,
      visible: false,
      isLoading: false,
      loading: false,
      formDataDialog: {},
      // operateList,
      getList,

      visibleCell: false, // 分配工位弹框
      isLoadingCell: false, // 分配工位弹窗loading
      // formDescDialogCell, // 分配工位表单配置
      formDataDialogCell: {}, // 分配工位数据对象
      addProcessCell, // 给现象分配原因
      // 列表页字段的绑定配置
      column: [
        {
          type: 'selection',
          fixed: 'left'
        },
        {
          type: 'index',
          label: $i18n.t('common.order'),
          width: 60,
          fixed: 'left'
        },
        // {
        //   prop: "factoryCode",
        //   label: "工厂编码",
        //   minWidth: 120,
        //   showOverflowTooltip: true,
        // },
        {
          prop: 'processTypeId',
          label: $i18n.t('mesProcess.processTypeId'),
          minWidth: 120,
          showOverflowTooltip: true,
          optionProp: {
            value: 'id',
            label: 'processTypeName'
          },
          option: async (data) => {
            const list = await getProcessTypeIdList()
            return list.data.result
          }
        },
        {
          prop: 'processProperty',
          label: $i18n.t('mesProcess.processProperty'),
          minWidth: 140,
          showOverflowTooltip: true,
          optionProp: {
            value: 'value',
            label: 'description'
          },
          option: async (data) => {
            const list = await getProcessPropertyList()
            return list.data.result
          }
        },
        {
          prop: 'processCode',
          label: $i18n.t('mesProcess.processCode'),
          minWidth: 120,
          showOverflowTooltip: true
        },
        {
          prop: 'processName',
          label: $i18n.t('mesProcess.processName'),
          minWidth: 120,
          showOverflowTooltip: true
        },

        {
          prop: 'isReportStart',
          label: $i18n.t('mesProcess.isReportStart'),
          minWidth: 150,
          showOverflowTooltip: true,
          require: true,
          optionProp: {
            value: 'value',
            label: 'description'
          },
          option: async (data) => {
            const list = await getYesOrNotList()
            return list.data.result
          }
        },

        {
          prop: 'endReportModel',
          label: $i18n.t('mesProcess.endReportModel'),
          minWidth: 150,
          showOverflowTooltip: true,
          require: true,
          optionProp: {
            value: 'value',
            label: 'description'
          },
          option: async (data) => {
            const list = await getReportModelList()
            return list.data.result
          }
        },
        {
          prop: 'workshopCode',
          label: $i18n.t('mesProcess.workshopCode'),
          minWidth: 120,
          showOverflowTooltip: true
        },
        {
          prop: 'workshopName',
          label: $i18n.t('mesProcess.workshopName'),
          minWidth: 140,
          showOverflowTooltip: true
        },
        {
          prop: 'processContent',
          label: $i18n.t('mesProcess.processContent'),
          minWidth: 140,
          showOverflowTooltip: true
        },
        {
          prop: 'regularName',
          label: $i18n.t('mesProcess.materialRegularName'),
          minWidth: 180,
          showOverflowTooltip: true
        },
        {
          prop: 'regularContent',
          label: $i18n.t('mesProcess.materialRegularContent'),
          minWidth: 180,
          showOverflowTooltip: true
        },
        // {
        //   prop: "remark",
        //   label: "备注",
        //   showOverflowTooltip: true,
        // },
        {
          prop: 'createByName',
          label: $i18n.t('common.createByName'),
          width: 130,
          showOverflowTooltip: true
        },
        {
          prop: 'createTime',
          label: $i18n.t('common.createTime'),
          width: 170
        },
        {
          prop: 'updateByName',
          label: $i18n.t('common.updateByName'),
          width: 130,
          showOverflowTooltip: true
        },
        {
          prop: 'updateTime',
          label: $i18n.t('common.updateTime'),
          width: 170
        },
        {
          prop: 'operate',
          label: $i18n.t('common.operation'),
          width: 220,
          fixed: 'right',
          render: (h, scope) => {
            return <ele-row-operation scope={scope} rowConfig={rowConfig} onRowOperate={this.rowOperate} />
          }
        }
      ]
    }
  },
  computed: {},
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (row.iddss === 1) {
        return 'warning-row'
      } else {
        return 'success-row'
      }
    },
    // 表格顶部按钮操作事件
    handleOperateEvent(data) {
      this.title = data.name
      const fnc = {
        add: () => {
          this.disableFields(false)
          this.formDataDialog = {}
          this.visible = true
        },
        deleteBatch: () => {
          this.$confirm($i18n.t('common.deleteBatch',{name:$i18n.t('mesProcess.name')}), $i18n.t('common.tip'), {
            confirmButtonText: $i18n.t('common.ok'),
            cancelButtonText: $i18n.t('common.cancel'),
            type: 'warning'
          }).then(() => {
            const ids = data.rows.map((val) => val.id).join(',')
            this.rowDel(ids)
          })
        },
        exportExcel: () => {
          var url = `${minioUrl}/mes-template/标准工序模板.xls`
          window.open(url)
        }
      }
      fnc[data.handleName]()
    },
    // 表格行操作事件
    rowOperate({ handleName, name, row }) {
      this.title = name
      const fnc = {
        edit: () => {
          this.disableFields(false)
          this.rowDetail(row.id)
          this.visible = true
        },
        detail: () => {
          this.disableFields(true)
          this.rowDetail(row.id)
          this.visible = true
        },
        delete: () => {
          this.$confirm($i18n.t('common.deleteSingle',{name:$i18n.t('mesProcess.name')}), $i18n.t('common.tip'), {
            confirmButtonText: $i18n.t('common.ok'),
            cancelButtonText: $i18n.t('common.cancel'),
            type: 'warning'
          }).then(() => {
            this.rowDel(row.id)
          })
        },
        workcell: () => {
          this.getWorkCellList(row.processCode, row.processName, row)
        }
      }
      fnc[handleName]()
    },
    doSubmit({ title, api, data }) {
      this.isLoading = true
      api(data)
        .then((res) => {
          const message = res.data.message
          this.$message.success(message || title)
          this.visible = false
          this.refresh()
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    // 弹框提交事件
    handleSubmit(data) {
      if (this.isLoading) return // 判断状态
      const params = this.formDataDialog.id ? { title: $i18n.t('common.editSuccess'), api: rowUpdate, data } : { title: $i18n.t('common.addSuccess'), api: rowCreate, data }

      this.doSubmit(params)
    },
    // 删除
    rowDel(data) {
      this.loading = true
      rowDel(data)
        .then((res) => {
          const message = res.data.message
          this.$message.success(message || $i18n.t('common.deleteSuccess'))
          this.refresh()
        })
        .finally(() => {
          this.loading = false
        })
    },
    disableFields(flag) {
      this.formDescDialog.disabled = flag
      this.formDescDialog.isShowSubmitBtn = !flag
    },
    rowDetail(id) {
      rowDetail(id).then((res) => {
        this.formDataDialog = res.data.result
      })
    },
    // 获取工位
    getWorkCellList(processCode, processName, row) {
      // 现象ID
      this.loading = true
      getListByProcess({
        processCode,
        factoryCode: this.$store.getters.factoryCode
      })
        .then((res) => {
          this.formDataDialogCell = {
            ...row,
            processCode: processCode,
            processName: processName,
            mesProcessCells: []
          }
          this.tableData = res.data.result || []
          this.visibleCell = true
        })
        .finally(() => {
          this.loading = false
        })
    },

    // 提交工序-工位关系
    handleSubmitCell(data) {
      this.isLoadingCell = true
      const { processCode, processName } = data
      const params = {
        processCode,
        processName,
        mesProcessCellList: this.tableData
      }
      console.log('AAA=', data, params)
      addProcessCell(params)
        .then((res) => {
          this.$message.success($i18n.t('common.editSuccess'))
          this.visibleCell = false
        })
        .finally(() => {
          this.isLoadingCell = false
        })
    },
    // 刷新表格数据
    refresh(isReset = true) {
      this.$refs.eleTable.refresh(isReset)
    }
  }
}
</script>
<style scoped lang="scss">
.mesProcess {
  /deep/.el-transfer-panel {
    width: 40% !important;
  }
  .warning-row {
    background: oldlace;
  }
}
</style>
